<div class="content-section introduction">
    <div class="feature-intro">
        <h1>OrderList</h1>
        <p>OrderList is used to managed the order of a collection.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-orderList [value]="products" [listStyle]="{'height':'auto'}" header="List of Products" filterBy="name" filterPlaceholder="Filter by name" dragdrop="true">
            <ng-template let-product pTemplate="item">
                <div class="product-item">
                    <div class="image-container">
                            <img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.name" class="product-image" />
                    </div>
                    <div class="product-list-detail">
                        <h5 class="p-mb-2">{{product.name}}</h5>
                        <i class="pi pi-tag product-category-icon"></i>
                        <span class="product-category">{{product.category}}</span>
                    </div>
                    <div class="product-list-action">
                        <h6 class="p-mb-2">${{product.price}}</h6>
                        <span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
                    </div>
                </div>
            </ng-template>
        </p-orderList>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;OrderListModule&#125; from 'primeng/orderlist';
</app-code>

            <h3>Getting Started</h3>
            <p>OrderList requires an array as its value and a ng-template for its content where each item in the array
                 can be accessed inside the ng-template using a local <i>ng-template</i> variable.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-orderList [value]="cars"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        &lt;div&gt;
            &lt;img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48"&gt;
            &lt;div style="font-size:14px;float:right;margin:15px 5px 0 0"&gt;{{car.brand}} - {{car.year}} - {{car.color}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-orderList&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MyComponent &#123;

    cars: Car[];

    ngOnInit() &#123;
        this.cars = //initialize cars
    &#125;
&#125;
</app-code>

            <h3>Multiple Selection</h3>
            <p>Multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
            devices metaKeySelection is turned off automatically.</p>

            <h3>Selection Binding</h3>
            <p>The optional <i>selection</i> property is provided in case you'd like to a two-way binding to the selections.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-orderList [value]="cars" [(selection)]="selectedCars"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        &lt;div&gt;
            &lt;img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48"&gt;
            &lt;div style="font-size:14px;float:right;margin:15px 5px 0 0"&gt;{{car.brand}} - {{car.year}} - {{car.color}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-orderList&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MyComponent &#123;

    cars: Car[];

    selectedCars: Car[];

    ngOnInit() &#123;
        this.cars = //initialize cars
    &#125;
&#125;
</app-code>

            <h3>Filtering</h3>
            <p>Items can be filtered using an input field by enabling the <i>filterBy</i> property that specifies the fields to use in filtering.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-orderList [value]="cars" filterBy="brand"&gt;&lt;/p-orderList&gt;
</app-code>

            <p>Multiple fields can be defines using a comma separates list.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-orderList [value]="cars" filterBy="brand,color,address.city"&gt;&lt;/p-orderList&gt;
</app-code>

            <h3>DragDrop</h3>
            <p>Items can be reordered using drag and drop by enabling <i>dragdrop</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-orderList [value]="cars" dragdrop="true"&gt;
</app-code>

            <h3>Buttons Location</h3>
            <p>Buttons that control the ordering are displayed at the left side of the list by default, <i>controlsPosition</i> property enables customizing the location. Currently
                right is the available alternative.
            </p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-orderList [value]="cars" controlsPosition="right"&gt;
</app-code>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects to reorder.</td>
                        </tr>
                        <tr>
                            <td>selection</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects to bind the selections.</td>
                        </tr>
                        <tr>
                            <td>header</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text for the caption</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>listStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the list element.</td>
                        </tr>
                        <tr>
                            <td>filterBy</td>
                            <td>string</td>
                            <td>null</td>
                            <td>When specified displays an input field to filter the items on keyup and decides which fields to search against.</td>
                        </tr>
                        <tr>
                            <td>filterMatchMode</td>
                            <td>string</td>
                            <td>contains</td>
                            <td>Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".</td>
                        </tr>
                        <tr>
                            <td>filterLocale</td>
                            <td>string</td>
                            <td>undefined</td>
                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
                        </tr>
                        <tr>
                            <td>metaKeySelection</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
                            can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
                        </tr>
                        <tr>
                            <td>dragdrop</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to enable dragdrop based reordering.</td>
                        </tr>
                        <tr>
                            <td>filterPlaceHolder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Placeholder text on filter input.</td>
                        </tr>
                        <tr>
                            <td>trackBy</td>
                            <td>Function</td>
                            <td>null</td>
                            <td>Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.</td>
                        </tr>
                        <tr>
                            <td>controlsPosition</td>
                            <td>string</td>
                            <td>left</td>
                            <td>Defines the location of the buttons with respect to the list, valid values are "left" or "right".</td>
                        </tr>
                        <tr>
                            <td>ariaFilterLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the filter input.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onReorder</td>
                            <td>event: browser event</td>
                            <td>Callback to invoke when list is reordered.</td>
                        </tr>
                        <tr>
                            <td>onSelectionChange</td>
                            <td>originalEvent: browser event<br/>
                                value: Current selection</td>
                            <td>Callback to invoke when selection changes.</td>
                        </tr>
                        <tr>
                            <td>onFilterEvent</td>
                            <td>originalEvent: browser event<br/>
                                value: Current filter values</td>
                            <td>Callback to invoke when filtering occurs.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-orderlist</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-orderlist-list</td>
                            <td>List container.</td>
                        </tr>
                        <tr>
                            <td>p-orderlist-item</td>
                            <td>An item in the list.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/orderlist" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-orderlist-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-orderList [value]="products" [listStyle]="&#123;'height':'auto'&#125;" header="List of Products" filterBy="name" filterPlaceholder="Filter by name" dragdrop="true"&gt;
    &lt;ng-template let-product pTemplate="item"&gt;
        &lt;div class="product-item"&gt;
            &lt;div class="image-container"&gt;
                    &lt;img src="assets/showcase/images/demo/product/&#123;&#123;product.image&#125;&#125;" [alt]="product.name" class="product-image" /&gt;
            &lt;/div&gt;
            &lt;div class="product-list-detail"&gt;
                &lt;h5 class="p-mb-2"&gt;&#123;&#123;product.name&#125;&#125;&lt;/h5&gt;
                &lt;i class="pi pi-tag product-category-icon"&gt;&lt;/i&gt;
                &lt;span class="product-category"&gt;&#123;&#123;product.category&#125;&#125;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="product-list-action"&gt;
                &lt;h6 class="p-mb-2"&gt;$&#123;&#123;product.price&#125;&#125;&lt;/h6&gt;
                &lt;span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">&#123;&#123;product.inventoryStatus&#125;&#125;&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-orderList&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class OrderListDemo &#123;

    products: Product[];
    
    constructor(private productService: ProductService) &#123; &#125;

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(cars =&gt; this.products = cars);
    &#125;

&#125;
</app-code>
<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
.product-item &#123;
    display: flex;
    align-items: center;
    padding: .5rem;
    width: 100%;

    img &#123;
        width: 75px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        margin-right: 1rem;
    &#125;

    .product-list-detail &#123;
        flex: 1 1 0;
    &#125;

    .product-list-action &#123;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    &#125;

    .product-category-icon &#123;
        vertical-align: middle;
        margin-right: .5rem;
    &#125;

    .product-category &#123;
        vertical-align: middle;
        line-height: 1;
    &#125;
&#125;

@media screen and (max-width: 576px) &#123;
    .product-item &#123;
        flex-wrap: wrap;

        .image-container &#123;
            width: 100%;
            text-align: center;
        &#125;

        img &#123;
            margin: 0 0 1rem 0;
            width: 100px;
        &#125;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-orderlist-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
